<template>
	<w-container class='page-bg' :loading='loading'>
		<w-navbar :placeholder="true" title="分类">
			<text class="font-color-textPrimary font-size-12" slot='right' @click="backPage">{{handleLang('确认')}}</text>
		</w-navbar>
		<view class="pa-16">
			<view class="font-size-14 font-color-textPrimary">
				{{handleLang('我的分类')}}
			</view>
			<view class="flex flex-w gap-12">
				<view class="ptb-8 plr-12 mt-12 flex flex-ai-center bg-color-item font-size-14 font-color-textPrimary"
					style="border-radius: 86rpx;width: 212rpx;" v-for="item in tabList" :key="item.series_id">
					<text  class="text-center flex-1 text-overflow">
						{{handleLang(item.series_name)}}
					</text>
					<w-icon size='20' v-if="item.series_id>0" class='ml-8' name='remove' @click='removeSelfSeries(item)' color="#fdfdfd"></w-icon>
				</view>
			</view>
		</view>
		<view class="pa-16">
			<view class="font-size-14 font-color-textPrimary">
				{{handleLang('其他分类')}}
			</view>
			<view class="flex flex-w gap-12">
				<view
					class="ptb-8 plr-12 mt-12 flex flex-ai-center bg-color-item font-size-14 font-color-textPrimary font-color-textPrimary"
					style="border-radius: 86rpx;width: 212rpx;" v-for="item in setting.platform_series" :key="item.series_id">
					<text  class="text-center flex-1 text-overflow">
						{{handleLang(item.series_name)}}
					</text>
					<w-icon size='20' class='ml-8' name='send' @click='addSelfSeries(item)'></w-icon>
				</view>
			</view>
		</view>
	</w-container>
</template>

<script>
	import {
		getSelfSeries,
		addSelfSeries,
		removeSelfSeries
	} from '@/api/collection/index.js'
	import {
		mapActions,
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				type:2,
				baseList: [{
					series_name: '我的关注',
					series_id: -1,
				}, {
					series_name: '推荐',
					series_id: -2,
				}, {
					series_name: '全部',
					series_id: 0
				}],
				loading: false,
				setting: {
					custom_series: [],
					platform_series: []
				}
			}
		},
		computed: {
			...mapState('goods', ['collectionSeries']),
			tabList() {
				return this.baseList.concat(this.setting.custom_series)
			}
		},
		onLoad({
			type
		}) {
			this.type=type;
			this.getSeries()
			this.getSelfSeries(type);
		},
		methods: {
			...mapActions('goods', ['getSeries']),
			async getSelfSeries(type) {
				// this.loading = true;
				let res = await getSelfSeries({
					type
				})
				this.getSeries(true)
				this.setting = res.data;
				// this.loading = false;
			},
			addSelfSeries({
				series_id
			}) {
				addSelfSeries({
					series_id
				}).then(res=>{
					this.getSelfSeries(this.type)
				})
			},
			removeSelfSeries({
				series_id
			}) {
				removeSelfSeries({
					series_id
				}).then(res=>{
					this.getSelfSeries(this.type)
				})
			}
		}
	}
</script>

<style>

</style>
